<template>
  <div style="background-color:#ffff">
    <el-row  :md="24" :ms="24" class="classflex" >
      <el-col :span="4"  :offset="2" class="imgcenter">
        <img src="../assets/img/log.png" />
      </el-col>
      <el-col  :md="24" :span="18">
        <el-menu
          mode="horizontal"
          :router="true"
          default-active="/index"
          class="el-menu-head gupflex"
          style="position:relative;"
        >
          <el-menu-item index="/index">首页</el-menu-item>
          <el-menu-item index="/Finances">理财</el-menu-item>
          <el-menu-item index="/Stocks">我要炒股</el-menu-item>
          <el-submenu index="Aboutme" id="el-menu-aboutme" :show-timeout="100" :hide-timeout="100">
            <template slot="title">关于我们</template>
            <el-menu-item index="/Aboutme/Announcement">网站公告</el-menu-item>
            <el-menu-item index="/Aboutme/Introduction">公司介绍</el-menu-item>
            <el-menu-item index="/Aboutme/Protocol">服务协议</el-menu-item>
            <el-menu-item index="/Aboutme/Help">新手帮助</el-menu-item>
            <el-menu-item index="/Aboutme/Report">媒体报道</el-menu-item>
            <el-menu-item index="/Aboutme/Recruitment">诚聘英才</el-menu-item>
            <el-menu-item index="/Aboutme/Contact">联系我们</el-menu-item>
          </el-submenu>
          <el-submenu
            index="Account"
            :show-timeout="100"
            :hide-timeout="100"
            v-if="islog"
            id="el-menu-account"
          >
            <template slot="title">我的账户</template>
            <el-menu-item index="/Account/Mydata">我的资料</el-menu-item>
            <el-menu-item index="/Account/Certification">实名认证</el-menu-item>
            <el-menu-item index="/Account/Massage">消息中心</el-menu-item>
            <el-menu-item index="/Account/Log2">快捷登录</el-menu-item>
            <el-menu-item index="/Account/Financial">我要理财</el-menu-item>
            <el-menu-item index="/Account/StocksEnd">我要炒股</el-menu-item>
            <el-menu-item index="/Account/Promotion">我的推广</el-menu-item>
          </el-submenu>
          <el-menu-item v-else >
            <el-button-group class="buttongrounp">
              <el-button plain round>
                <router-link to="/login">登陆</router-link>
              </el-button>
              <el-button plain round>
                <router-link to="/sinin">注册</router-link>
              </el-button>
            </el-button-group>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Swiper from "../tool/swiper";

export default {
  components: {
    Swiper
  },

  props: {
    islog: {
      type: Boolean,
      default: false
    }
  },

  methods: {},

  mounted() {
    document.getElementById("el-menu-aboutme").querySelector("div").style =
      "font-size:18px;color:#666;";
    document.getElementById("el-menu-account").children[0].style =
      "font-size:18px;color:#666;";
  }
};
</script>

<style scoped>
.headimg {
  max-height: 75px;
}

a {
  font-size: 1.125rem;
  color: #666666;
}

.line2 {
  box-sizing: border-box;
  border-right: 1px solid #666666;
}

.el-menu-head,
.el-menu-head li {
  margin-left: 4%;
  font-size: 1.125rem;
  color: #666;
  border-bottom: none !important;
}
.classflex{
  display: flex;
}
@media screen and (min-width: 390px) and (max-width:1050px) {
      .classflex{
          display: flex;
          flex-direction: column;
      }
      .gupflex{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .buttongrounp{
        display: flex;
        justify-content: space-between;
        align-items: center;
        vertical-align: center;
        padding-top: 5%;
      }
      .imgcenter{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
          text-align: center;
      }
}
</style>
